import React from 'react';
import { withRouter, Route } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { RouteLayout } from 'weaver-mobile-page';
import NewVote from './New';
import Vote from './Vote';

@withRouter
@inject('listStore')
@observer
export default class RouteModal extends React.Component {

  render() {
    const { listStore } = this.props;
    const { newVoteLayout, votingLayout, votedLayout, votingNewLayout } = listStore;
    return (
      <div className='group-vote-router'>
        <Route
          key={newVoteLayout.id}
          path={newVoteLayout.path}
          render={() => (
            <RouteLayout>
              <div key="newVote" className="wm-route-layout">
                <NewVote/>
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={votingLayout.id}
          path={`${votingLayout.path}/:id`}
          render={() => (
            <RouteLayout>
              <div key="voting" className="wm-route-layout">
                <Vote />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={votingNewLayout.id}
          path={`${votingNewLayout.path}/:id`}
          render={() => (
            <RouteLayout>
              <div key="votingnew" className="wm-route-layout">
                <Vote />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key={votedLayout.id}
          path={`${votedLayout.path}/:id`}
          render={() => (
            <Vote isVoted />
          )}
        />
      </div>
    )
  }
}
